<template>
  <a-card>
    <template #title> 水电费用详情 </template>
    <a-card>
      <div class="space-y-2">
        <div class="flex justify-between">
          <span>用水量：</span>
          <span>{{ utilityData.water.usage }} 吨</span>
        </div>
        <div class="flex justify-between">
          <span>水费：</span>
          <span>¥{{ utilityData.water.cost.toFixed(2) }}</span>
        </div>
        <div class="flex justify-between">
          <span>用电量：</span>
          <span>{{ utilityData.electricity.usage }} 度</span>
        </div>
        <div class="flex justify-between">
          <span>电费：</span>
          <span>¥{{ utilityData.electricity.cost.toFixed(2) }}</span>
        </div>
        <div class="flex justify-between font-bold">
          <span>总计：</span>
          <span
            >¥{{
              (utilityData.water.cost + utilityData.electricity.cost).toFixed(2)
            }}</span
          >
        </div>
      </div>
    </a-card>
  </a-card>
</template>

<script setup lang="ts">
import { Card } from "ant-design-vue";
import { ref, defineProps } from "vue";

interface UtilityData {
  water: { usage: number; cost: number };
  electricity: { usage: number; cost: number };
}
// 假设 utilityData 是从父组件传递过来的数据，这里可以使用 props 接收
const props = defineProps<{ utilityData: UtilityData }>();
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
